<template>
  <div class="met_message" :class="data.type">
    <p>{{data.content}}</p>
  </div>
</template>
<script>
export default {
  props: {
    data: Object
  },
  data() {
    return {
      timmer: null
    }
  },
  watch: {
    data() {
      if (this.timmer) clearTimeout(this.timmer)
      this.timmer = setTimeout(() => {
        this.$emit('reset')
      }, 2000)
    }
  }
}
</script>
<style lang="scss" >
.met_message {
  position: fixed;
  top: 0;
  left: 0px;
  width: 100%;
  transition: all 1.5s ease;
  text-align: center;
  padding: 8px;
  transform: translateY(0);
  p {
    color: #fff;
  }
  &.error {
    background: #ed3f14;
    transition: all 1.5s ease;
    transform: translateY(47px);
  }
}
</style>